<div class="bind-form">
  <form>
    <div class="form-group">
      <label>
        <h3>Create a binding for application <strong>{{ctrl.applicationName}}</strong></h3>
      </label>
      <span class="help-block">
        Bindings create a secret containing the necessary information for an application to use a service.
      </span>
    </div>
  </form>

  <label ng-if="!ctrl.allowNoBinding">
    Select a service:
  </label>
  <form name="ctrl.formName">
    <fieldset>
      <div class="radio">
        <div ng-if="ctrl.allowNoBinding" class="bind-service-selection">
          <label>
            <input type="radio" ng-model="ctrl.serviceToBind" ng-value="null">
            Do not bind at this time.
          </label>
          <div class="bind-description">
          <span class="help-block service-instance-name">
            Bindings can be created later from within a project.
          </span>
          </div>
        </div>
        <div ng-repeat="serviceInstance in ctrl.bindableServiceInstances" class="bind-service-selection">
          <label>
            <input type="radio" ng-model="ctrl.serviceToBind" ng-value="serviceInstance">
            {{ctrl.serviceClasses[serviceInstance.spec.clusterServiceClassRef.name].spec.externalMetadata.displayName || serviceInstance.spec.clusterServiceClassRef.name}}
          </label>
          <div class="bind-description">
            <span class="pficon pficon-info"
                  ng-if="!(serviceInstance | isServiceInstanceReady)"
                  data-content="This service is not yet ready. If you bind to it, then the binding will be pending until the service is ready."
                  data-toggle="popover"
                  data-trigger="hover">
            </span>
            <span class="help-block service-instance-name">
              {{serviceInstance.metadata.name}}
            </span>
          </div>
        </div>
        <h4 ng-if="!ctrl.bindableServiceInstances.length">
          <span class="pficon pficon-info" aria-hidden="true"></span>
          <span class="help-block service-instance-name">
            There are no bindable services in this project
          </span>
        </h4>
      </div>
    </fieldset>
  </form>
</div>
